<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>{{title}}</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
		<link rel="stylesheet" type="text/css" href="../wwwroot/bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="../wwwroot/css/animate.css"/>
		<style type="text/css">
			html,body{
				background-color: #f0f0f0;
				padding-top: 44px;
			}
			#content .container{
				background-color: white;
				
			}
			.userPhoto {
				width: 70px;
				height: 70px;
				background-color: lightblue;
				margin: 0 auto 30px;
				border-radius: 50%;
				line-height: 70px;
				text-align: center;
				font-size: 20px;
				color: white;
				border: 2px solid white;
				position: relative;
			}
		
			.userinfo{
				width: 100%;
				height:100%;
				/*border: 1px solid lightblue;*/
				box-shadow: 0 0 3px lightcoral;
			}
			.userinfo div{
				width: 33%;
				float: left;
				height: 100px;
				line-height: 100px;
				text-align: center;
				box-sizing: border-box;
				
			}
			/*.userinfo div:nth-of-type(1),.userinfo div:nth-of-type(2){
				border-right: 1px solid lightpink;
			}*/
			.userinfo a{
				width: 100%;
				height: 100%;
				display: block;
				color: #ccc;
				text-decoration: none;
			}
			.userinfo div:hover a{
				color: white;
			}
			.userinfo div:hover{
				background-color: lightcoral;
			}
			#goback{
				position: absolute;
				top:10px;
				left: 10px;
			}
			#nav{
				position: absolute;
				bottom:20px;
				left:calc(50% - 59px);
			}
			 .list-group-item{
				margin-bottom: 5px;
				height: 50px;
				line-height: 30px;
				color: #ccc;
				border-radius: 25px;
			}
			.list-group-item:hover{
				background-color: lightcoral;
				color: white;
				
			}
			.badge {
				margin-top: 5px;
			}
			#goback{
				width: 30px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: absolute;
				left: 10px;
				top: 10px;
				background-color: lightblue;
				border-radius:50% ;
				color:white;
				cursor: pointer;
			}
			.uidContainer{
				position: absolute;
				color: lightcoral;
				right: 10px;
				top: 15px;
				font-weight: 700;
			}
			.uidContainer:hover{
				text-decoration: none;
				
			}
		</style>
	</head>
	<body>
		
		<a id="goback"><span class="glyphicon glyphicon-chevron-left"></span></a>
		<a class="uidContainer">userId: <span class="userId">###</span></a>
		<div class="userPhoto">
			<span class="glyphicon glyphicon-user"></span>
			
		</div>
		
		<section id="content">
			<div class="container" style="background-color: white;height: 120px;padding: 10px;margin-bottom: 20px;">
				<div class="userinfo">
					<div class="">
						<a href="userHistory.html">吐槽记录</a>
					</div>
					<div class="">
						<a href="uploadPhoto.html">上传头像</a>
					</div>
					<div class="">
						<a href="/logOut">退出登录</a>
					</div>
				</div>		
			</div>
		</section>
		
		<section>
			<div class="container">
				<ul class="list-group" style="padding: 10px;">
					<li class="list-group-item active" >
						我的吐槽<span class="badge pull-right" id="tc" >0</span>
					</li>
					<li class="list-group-item">
						我的回复<span class="badge pull-right" id="reply" >0</span>
					</li>
					<li class="list-group-item">
						我的订阅<span class="badge pull-right" id="subscribe" >0</span>
					</li>
					<li class="list-group-item">
						浏览历史<span class="badge pull-right" id="readHistory" >0</span>
					</li>
				</ul>
			</div>
			
		</section>
		
		<section>
			<div class="btn-group" id="nav" >
				<a href="index3.html" class="btn btn-default" ><span class="glyphicon glyphicon-home"></span></a>
				<a href="post.html" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></a>
				<a href="search2.html" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></a>
			</div>
		</section>
	</body>
</html>
<script src="libs/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../wwwroot/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../wwwroot/libs/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		// 点击 左上角按钮 回到上一页
		$.get("/user/photo",function(resData){
			$("#tc").text(resData.tcCount);
			$("#reply").text(resData.replyCount);
			$("#subscribe").text(resData.subscribeCount);
			$("#readHistory").text(resData.readHCount);
			if(resData.photoUrl){
				$(".userPhoto").css({backgroundImage:"url("+resData.photoUrl+")",backgroundSize:"100% 100%"}).find("span").hide();
			}
		});
		$(".userId").text($.cookie("wcID"));
		$("#goback").click(function(){
			history.go(-1);
		});
		
		// 当点击用户头像区域的动画效果
		$(".userPhoto").click(function(){
			$(this).addClass("animated rubberBand");
			setTimeout(function(){
				$(".userPhoto").removeClass("animated rubberBand");
			},1000);
		});
		// 列表组的效果
		$(".list-group-item").click(function(){
			$(this).addClass("animated flipInX");
			$(this).addClass("active").siblings().removeClass("active");
			setTimeout(function(){
				$(".list-group-item").removeClass("animated flipInX");		
			},500);
		})
		// 用户历史记录
		$.post("/HistoryNotes",function(resData){
			$("#tc").text(resData.tc);
			$("#reply").text(resData.reply);
			$("#take").text(resData.take);
			$("#history").text(resData.history);
		});
	});	
</script>
